<template>
  <div class="line-right" id="lineRight"></div>
</template>

<script>
export default {
  mounted() {
    this.drawLineRight();
  },
  methods: {
    drawLineRight() {
      var myChart = this.$echarts.init(document.getElementById("lineRight"));
      var option = {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          top: "0%",
          data: ["Email", "Union Ads", "Video Ads", "Direct", "Search Engine"],
          textStyle: {
            color: "rgba(255,255,255,.5)",
            fontSize: "12",
          },
        },
        grid: {
          left: "10",
          right: "30",
          top: "30",
          bottom: "10",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
            // 文本颜色
            axisLabel: {
              textStyle: {
                color: "rgba(255,255,255,.6)",
                fontSize: 12,
              },
            },
            //x轴线的颜色
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,.2)",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,.1)",
              },
            },
            axisLabel: {
              textStyle: {
                color: "rgba(255,255,255,.6)",
                fontSize: 12,
              },
            },
            splitLine: {
              lineStyle: {
                color: "rgba(255,255,255,.6)",
              },
            },
          },
        ],
        series: [
          // 第一个模块
          {
            name: "播放量",
            type: "line",
            smooth: true,
            symbol: "circle",
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
              normal: {
                color: "#0184d5",
                width: 2,
              },
            },
            areaStyle: {
              normal: {
                color: this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(1, 132, 213, 0.4)",
                    },
                    {
                      offset: 0.8,
                      color: "rgba(1, 132, 213, 0.1)",
                    },
                  ],
                  false
                ),
                // 影子效果
                shadowColor: "rgba(0, 0, 0, 0.1)",
              },
              // 设置拐点
              symbol: "circle",
              // 拐点大小
              symbolSize: 33,
              // 开始不现实拐点  鼠标经过显示
              // showSymbol: false,
            },
            // 拐点颜色 大小 设置
            itemStyle: {
              normal: {
                color: "#0184d5",
                borderColor: "rgba(221, 220, 107, .1)",
                borderWidth: 12,
              },
            },

            data: [
              50, 30, 50, 60, 10, 50, 30, 50, 60, 40, 60, 40, 80, 30, 50, 60,
              10, 50, 30, 70, 20, 50, 10, 40, 50, 30, 70, 20, 50, 10, 40,
            ],
          },
          {
            name: "Search Engine",
            type: "line",
            smooth: true,
            symbol: "circle",
            symbolSize: 5,
            showSymbol: false,
            label: {
              show: true,
              position: "top",
            },
            // 填充颜色
            areaStyle: {
              normal: {
                color: this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(1, 132, 213, 0.4)",
                    },
                    {
                      offset: 0.8,
                      color: "rgba(1, 132, 213, 0.1)",
                    },
                  ],
                  false
                ),
                // 影子效果
                shadowColor: "rgba(0, 0, 0, 0.1)",
              },
              // 设置拐点
              symbol: "circle",
              // 拐点大小
              symbolSize: 33,
              // 开始不现实拐点  鼠标经过显示
              // showSymbol: false,
            },
            // 拐点颜色 大小 设置
            itemStyle: {
              normal: {
                color: "#0184d5",
                borderColor: "rgba(221, 220, 107, .1)",
                borderWidth: 12,
              },
            },
            data: [
              30, 40, 30, 40, 30, 40, 30, 60, 20, 40, 20, 40, 30, 40, 30, 40,
              30, 40, 30, 60, 20, 40, 20, 40, 30, 60, 20, 40, 20, 40,
            ],
          },
        ],
      };
      myChart.setOption(option);
      // 让图标跟着屏幕去适应
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
  },
};
</script>

<style>
.line-right {
  width: 100%;
  height: 100%;
}
</style>
